<template>
  <div>
    <myheader title="热点新闻" rightBtn="主页" @updataInfo="submitRecruit"></myheader>

    <div style="margin-top:46px;">
      <!-- 顶部图片 -->

      <van-image width="10rem" height="10rem" fit="contain" :src="article.image" />
      <div v-html="article.body"></div>
      <div class="viewmore" @click="initComments">
        查看知乎讨论
        <span class="js-question-holder"></span>
      </div>

      <!-- 评论 -->
      <van-popup
        class="popup"
        :show="show"
        @click-overlay="showPopup"
        @click-close-icon="showPopup"
        closeable
        position="bottom"
      >
        <van-skeleton v-if="omments.length==0" title avatar :row="8" />
        <div v-else>
          <van-row
            v-for="(item,index) in omments"
            :key="index"
            style="display:flex; margin-bottom:15px;"
          >
            <van-row style="width:25%;">
              <van-image :src="item.avatar" width="50" height="50" round>
                <template v-slot:loading>
                  <van-loading type="spinner" size="20" />
                </template>
              </van-image>
            </van-row>

            <van-row style="width:60%;">
              <van-row>{{item.content}}</van-row>
              <van-row style="width:100%;    position: relative;">
                {{formatDateTime(item.time)}}
                <span style="position: absolute;right: 0;">
                  <van-icon name="like" color="#ff6c37" />
                  {{item.likes}}
                </span>
              </van-row>
            </van-row>
            <van-divider dashed>{{item.author}}</van-divider>
          </van-row>
        </div>
      </van-popup>
    </div>
  </div>
</template>

<script>
import formatDateTime from '../../utils/data'
import myheader from '../../comon/myheader.vue'
export default {
  components: {
    myheader,
  },
  data() {
    return {
      id: this.$route.params.id,
      content: '',
      article: '',
      omments: [],
      show: false,
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    formatDateTime(val) {
      return formatDateTime.formatDateTime6(val)
    },
    async init() {
      const res = await this.$axios.get('https://v2.alapi.cn/api/zhihu/news', {
        params: {
          id: this.id,
          token: this.$path.ALAPI_TOKEN,
        },
      })
      if ((res.data.code = 200)) {
        this.article = res.data.data
        var head = document.getElementsByTagName('HEAD').item(0)
        var style = document.createElement('link')
        style.href = this.article.css[0]
        style.rel = 'stylesheet'
        style.type = 'text/css'
        head.appendChild(style)
      }
    },
    async initComments() {
      this.show = !this.show
      const res = await this.$axios.get(
        'https://v2.alapi.cn/api/zhihu/short_comments',
        {
          params: {
            id: this.id,
            token: this.$path.ALAPI_TOKEN,
          },
        }
      )
      if ((res.data.code = 200)) {
        this.omments = res.data.data.comments
      }
      console.log(res.data.data.comments)
    },
    showPopup() {
      this.show = !this.show
    },
    submitRecruit() {
      this.$route.push('/home')
    },
  },
}
</script>
 <style scope>
.img-place-holder {
  height: 0 !important;
}
.view-more {
  display: none;
}
.viewmore {
  height: 40px;
  line-height: 40px;
  background: #f0f0f0;
  color: #b8b8b8;
  margin-bottom: 25px;
  text-align: center;
  font-size: 16px;
  width: 90%;
  margin: 30px auto;
}
.popup {
  height: 65%;
  padding: 10% 3% 0 3%;
}
.van-popup__close-icon--top-right {
  position: fixed !important;
  right: 18px !important;
  top: 37% !important;
}
</style>
